<%@ include file="../common/IncludeTop.jsp"%>

<style>
	.okTips{
		color: green;
	}
	.errorTips{
		color: red;
	}
</style>

<script>
	var xhr;
	function checkUsername(){
		var username = document.getElementById("username").value;
		xhr = new XMLHttpRequest();
		xhr.onreadystatechange = fun1;
		xhr.open("GET","usernameExist?username="+username,true);
		xhr.send(null);
	}

	function fun1(){
		if(xhr.readyState===4){
			if(xhr.status===200) {
				var tips=document.getElementById("usernameTips");
				var responseInfo = xhr.responseText;
				if(responseInfo==="Exist"){
					tips.className = 'errorTips';
					tips.innerText = "Invalid";
				}
				else if(responseInfo==="Not Exist"){
					tips.className = 'okTips';
					tips.innerText = "Available";
				}
			}
		}
	}


</script>

<div id="Catalog">
<form action="newAccount" method="post">
	<h3>User Information</h3>

	<table>
		<tr>
			<td>User ID:</td>
			<td>
				<input id="username" type="text" name="username"  onblur="checkUsername()"/>
				<span id="usernameTips"></span>
			</td>
		</tr>
		<tr>
			<td>New password:</td>
			<td><input name="password" /></td>
		</tr>
		<tr>
			<td>Repeat password:</td>
			<td><input name="repeatedPassword" /></td>
		</tr>
	</table>

	<%@ include file="IncludeAccountFields.jsp"%>

	<input type="submit" value="Save Account Information">

</form>
</div>

<%@ include file="../common/IncludeBottom.jsp"%>